<template>
    <div class="video-middle" v-bind:class="{'video-screen-full':isScreenFull}">
        <div class="video-middle-left" v-bind:class="{'video-screen-full':isScreenFull}">
            <div class="video-middle-left-shipin" v-bind:class="{'video-screen-full':isScreenFull}">

                <div style="color:black;width:100%;height:50px;box-shadow: 0 0 8px #e5e9ef;" v-if="!isScreenFull">
                    <div style="float:left;width:100%;height:30px;line-height:30px;padding-left:10px;">
                        <span style="color:#212121;font-size:16px;">{{videoTitle}}</span>
                    </div>
                    <div style="float:left;width:100%;height:20px;line-height:12px;padding-left:10px;">
                        <span style="color:#999999;font-size:12px;">{{fenquParent}} {{videoCreateDate}}</span>
                    </div>
<!--                    <div style="float:left;width:calc(100% - 290px);line-height:50px;height:50px;">-->
<!--                        <el-input @keyup.enter.native="danmuShoot" placeholder="请输入你想要发送的弹幕内容" v-model="danmuContent" class="input-with-select">-->
<!--                            <el-button slot="append" icon="el-icon-search" @click="danmuShoot"></el-button>-->
<!--                        </el-input>-->
<!--                    </div>-->
                </div>

                <VideoWithDanmu @sliderValueChange="sliderValueChange" @doChangeScreenStatus="doChangeScreenStatus"></VideoWithDanmu>

                <div style="color:black;width:100%;height:50px;box-shadow: 0 0 8px #e5e9ef;" v-if="!isScreenFull">
                    <div style="float:left;width:200px;height:50px;line-height:50px;text-align:center">
<!--                        在线：<span style="color:#505050;font-weight: bold">732</span> 人，-->
                        共有弹幕：<span style="color:#505050;font-weight: bold">{{danmuCount}}</span> 条
                    </div>
                    <div style="float:left;width:calc(100% - 200px);line-height:50px;height:50px;">
                        <el-input @keyup.enter.native="danmuShoot" placeholder="请输入你想要发送的弹幕内容" v-model="danmuContent" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="danmuShoot"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="video-middle-left-pinglun" v-if="!isScreenFull">

                <!--分页顶部效果-->
                <el-pagination style="margin:20px 0 10px 60px;"
                               background
                               layout="total,prev, pager, next"
                               :page-size="10"
                               :total="pinglunCount" v-show="pinglunCount>0"
                               @current-change="handleCurrentChange"
                               :current-page.sync="currentPage">
                </el-pagination>

                <!--写死一个评论模块-->
                <ChamUserDiscussInput @updatePinglun="_updatePinglun"></ChamUserDiscussInput>
                <ChaosUserDiscuss v-show="videoPinglunList.length>0" :pinglun-info="videoPinglunList[0]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>1" :pinglun-info="videoPinglunList[1]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>2" :pinglun-info="videoPinglunList[2]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>3" :pinglun-info="videoPinglunList[3]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>4" :pinglun-info="videoPinglunList[4]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>5" :pinglun-info="videoPinglunList[5]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>6" :pinglun-info="videoPinglunList[6]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>7" :pinglun-info="videoPinglunList[7]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>8" :pinglun-info="videoPinglunList[8]"></ChaosUserDiscuss>
                <ChaosUserDiscuss v-show="videoPinglunList.length>9" :pinglun-info="videoPinglunList[9]"></ChaosUserDiscuss>
                <div style="width:100%;float:left;">
                    <!--页面底部分页效果-->
                    <el-pagination style="margin:0 0 60px 60px;"
                                   background
                                   layout="total,prev, pager, next"
                                   :page-size="10"
                                   :total="pinglunCount" v-show="pinglunCount>0"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="currentPage"
                    >
                    </el-pagination>
                </div>

                <div style="width:100%;float:left;margin:0 0 60px 120px;color:black" v-show="pinglunCount==0">
                   当前尚无评论!
                </div>





            </div>
        </div>
        <div class="video-middle-right" v-if="!isScreenFull">
            <div class="video-middle-right-user-danmu-shipin">
                <VideoUserInfo ref="videoUserInfo"></VideoUserInfo>
                <VideoDanmuGroup></VideoDanmuGroup>
                <VideoGroup ref="videoGroup"></VideoGroup>
            </div>
            <div class="video-middle-right-xiangguantuijian">
                <h3 style="margin-left:10px;color:#333333">相关视频推荐</h3>
                <div style="margin-left:10px;margin-top:10px;margin-bottom:20px;">
                    <HotspotRank v-if="randomRecommand10.length>0" :video-info="randomRecommand10[0]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>1" :video-info="randomRecommand10[1]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>2" :video-info="randomRecommand10[2]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>3" :video-info="randomRecommand10[3]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>4" :video-info="randomRecommand10[4]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>5" :video-info="randomRecommand10[5]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>6" :video-info="randomRecommand10[6]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>7" :video-info="randomRecommand10[7]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>8" :video-info="randomRecommand10[8]"></HotspotRank>
                    <HotspotRank v-if="randomRecommand10.length>9" :video-info="randomRecommand10[9]"></HotspotRank>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import VideoWithDanmu from '@/components/video/videoWithDanmu'
    import VideoDanmuGroup from '@/components/video/videoDanmuGroup'
    import VideoGroup from '@/components/video/videoGroup'
    import VideoUserInfo from '@/components/video/videoUserInfo'
    import HotspotRank from "@/components/reportThird/hotspotRank";
    import ChamUserDiscussInput from "@/components/pinglun/chamUserDiscussInput"
    import ChaosUserDiscuss from "@/components/pinglun/chaosUserDiscuss"

    export default {
        name: "videoMiddle",
        components:{VideoWithDanmu,VideoDanmuGroup,VideoGroup,VideoUserInfo,HotspotRank,ChamUserDiscussInput,ChaosUserDiscuss},
        data(){
            return{
                isScreenFull:false,
                currentVideoIndex:0,
                danmuContent:'',
                sliderValue:0,
                videoTitle:'',
                videoPinglunList:[],
                pinglunCount:0,
                randomRecommand10:[],//随机推荐10部相关推荐的视频
                currentPage:1,
                danmuCount:0,
                fenquParent:'',
                videoCreateDate:''
            }
        },
        mounted(){
            var localStorage = window.localStorage;
            var videoInfo = JSON.parse(localStorage.getItem("videoInfo"));
            var self = this;
            self.videoTitle = videoInfo.videoTitle;
            if(videoInfo.fenquParent=='01'){
                self.fenquParent = '番剧';
            }

            if(videoInfo.fenquParent=='02'){
                self.fenquParent = '电视剧';
            }

            if(videoInfo.fenquParent=='03'){
                self.fenquParent = '电影';
            }

            if(videoInfo.fenquParent=='04'){
                self.fenquParent = '音乐';
            }

            if(videoInfo.fenquParent=='05'){
                self.fenquParent = '宅舞';
            }

            if(videoInfo.fenquParent=='06'){
                self.fenquParent = '综艺';
            }

            if(videoInfo.fenquParent=='07'){
                self.fenquParent = 'ASMR';
            }

            if(videoInfo.fenquParent=='08'){
                self.fenquParent = '电子歌姬';
            }

            if(videoInfo.fenquParent=='09'){
                self.fenquParent = '纪录片';
            }

            if(videoInfo.fenquParent=='10'){
                self.fenquParent = '声优';
            }
            // self.fenquParent = videoInfo.fenquParent;


            self.videoCreateDate = videoInfo.createDate.substring(0,10)+" "+videoInfo.createDate.substring(11,19);



            if(videoInfo.fenzuIndex>=0){
                self.currentVideoIndex = videoInfo.fenzuIndex;
                self.$refs.videoGroup.currentVideoIndexChange(self.currentVideoIndex);
            }


            //fenzuId大于0，说明是分组数据
            if(videoInfo.fenzuId>0){
                //根据fenzuId查询该分组内的所有数据,生成正片模块
                var submitForm = new Object();
                submitForm.fenzuId = videoInfo.fenzuId;
                self.$api.get('video-service/videoController/getVideoInfoByFenzuId',submitForm, result => {
                    //self.res = result;
                    self.$refs.videoGroup.videoInfoListChange(result);
                });

            }

            //根據video的user_uuid查找上傳用戶信息
            var uuid = videoInfo.userUuid;
            var submitForm = new Object();
            submitForm.uuid = uuid;
            self.$api.get('pdm-service/pdm/getUserInfoByUserUUID',submitForm, result => {
                self.$refs.videoUserInfo._userInfoChange(result);
            });

            var videoId = videoInfo.videoId;
            var videoForm = new Object();
            videoForm.videoId = videoId;
            self.$api.get('pinglun-service/pinglunController/getPinglunInfoCount',videoForm, result => {
                self.pinglunCount = result;
                self._searchPinglun(1);
            });

            var fenquParent = videoInfo.fenquParent;
            if(fenquParent=='00'){
                fenquParent = '01';
            }

            var randomForm = new Object();
            randomForm.fenquParent = fenquParent;

            self.$api.get('video-service/videoController/getVideoInfoRandom10ByFenquParent',randomForm, result => {
                self.randomRecommand10 = result;
            });

            var danmuObject = new Object();
            danmuObject.videoId = videoInfo.videoId;
            self.$api.get('danmu-service/danmuController/getDanmuTotalByVideoId',danmuObject, result => {
                self.danmuCount = result;
            });



        },
        methods:{
            handleCurrentChange(currentPage){
                this._searchPinglun(currentPage);
            },
            _searchPinglun(currentPage){
                var self = this;
                var totalPage = Math.ceil(self.pinglunCount/10);
                var start = (totalPage-currentPage)*10;
                var pageSize = 10;
                var videoInfo =  JSON.parse(localStorage.getItem("videoInfo"));
                var videoId = videoInfo.videoId;
                var videoForm = new Object();
                videoForm.videoId = videoId;
                videoForm.start = start;
                videoForm.pageSize = pageSize;
                self.$api.post('pinglun-service/pinglunController/getPinglunInfo',videoForm, result => {
                    self.videoPinglunList = result;
                });
            },
            _updatePinglun(){
                var self = this;
                var videoInfo =  JSON.parse(localStorage.getItem("videoInfo"));
                var videoId = videoInfo.videoId;
                var videoForm = new Object();
                videoForm.videoId = videoId;

                self.$api.get('pinglun-service/pinglunController/getPinglunInfoCount',videoForm, result => {
                    self.pinglunCount = result;
                    self._searchPinglun(1);
                    self.currentPage = 1;
                });
            },
            sliderValueChange(newValue){
                this.sliderValue = newValue;
            },

            danmuShoot(){
                //发射弹幕方法
                var localStorage = window.localStorage;
                //var videoId = localStorage.getItem("videoId");
                var videoInfo =  JSON.parse(localStorage.getItem("videoInfo"));
                var videoId = videoInfo.videoId;
                var sliderValue = this.sliderValue;
                //不允许0时弹幕的存在，强制修改为1
                if(sliderValue===0){
                    sliderValue = 1;
                }
                var danmuContent = this.danmuContent;
                var self = this;
                var danmuShootDTO = new Object();
                danmuShootDTO.videoId = videoId;
                danmuShootDTO.sliderValue = sliderValue;
                danmuShootDTO.danmuContent = danmuContent;


                var random1to3 = self._createRandom1to3();
                if(random1to3===1){
                    danmuShootDTO.danmuColor = 'white';
                }

                if(random1to3===2){
                    danmuShootDTO.danmuColor = 'pink';
                }

                if(random1to3===2){
                    danmuShootDTO.danmuColor = 'yellow';
                }


                var random0to100 = Math.floor(Math.random()*98)+1;
                danmuShootDTO.top = random0to100;
                var random1to999 = Math.floor(Math.random()*998)+1;
                danmuShootDTO.danmuDelay = random1to999;
                self.$api.post('danmu-service/danmuController/danmuShoot',danmuShootDTO, result => {
                    //清空弹幕信息
                    self.danmuContent = "";
                    //self.res = result;
                });
            },
            _createRandom1to3(){
                //随机生成0到100的随机数
                var random0to100 = Math.floor(Math.random()*100);
                //如果随机数大于90，返回3
                if(random0to100>90)
                    return 3;
                //如果随机数大于80，返回2
                if(random0to100>80)
                    return 2;
                //否则返回1
                return 1;
            },
            doChangeScreenStatus(screenStatus){
                //screenStatus为true代表从半屏转全屏
                //screenStatus为false代表从全屏转半屏
                var self = this;
                if(screenStatus){
                    self.isScreenFull = true;
                }

                if(!screenStatus){
                    self.isScreenFull = false;
                }
                self.$emit('doChangeScreenStatus',screenStatus);
            }
        }
    }
</script>

<style scoped>
    .video-middle{
        width:999px;
        min-height:400px;
        margin:20px auto 40px auto;
    }

    .video-middle-left{
        width:640px;
        min-height:400px;
        float:left;
    }

    .video-middle-right{
        width:359px;
        min-height:1000px;
        float:left;
    }

    .video-middle-left-shipin{
        width:640px;
        min-height:400px;
    }

    .video-middle-left-pinglun{
        width:640px;
        min-height:600px;
        /*background-color:blue;*/
    }

    .video-middle-right-user-danmu-shipin{
        width:359px;
        min-height:180px;
        float:left;
        /*background-color:blue;*/
    }

    .video-middle-right-xiangguantuijian{
        width:345px;
        margin-left:15px;
        min-height:500px;
        float:left;
        /*background-color:yellow;*/
    }

    .video-screen-full{
        width:100% !important;
        height:100% !important;
        margin:auto auto !important;
    }

</style>
